{% get_nav nav_id={data.nav.id} %}
{% assign header_nav = nav %}

<ul id="oem-navigation" class="header_menu flex whitespace-nowrap header_menu-item-first-wrapper overflow-hidden">
  {% if header_nav.size > 0 %}
    {% for firstLink in header_nav.nav_item %}
    {% assign secondLinks = firstLink.children %}
      {% comment %}
        判断有没有3级
      {% endcomment %}
      {% assign tree_type = 'one' %}
      {% if firstLink.children %}
        {% assign tree_type = 'two' %}
      {% endif %}
      {% for secondLink in firstLink.children %}
        {% if secondLink.children %}
          {% assign tree_type = 'three' %}
        {% endif %}
      {% endfor %}


      <li
        class="header_menu-item-first px-[18px] {% if secondLinks %}header_menu-openable{% endif %}"
        data-nav-id="{{firstLink.id}}"
        data-tree-type="{{tree_type}}">
        <div class="header_menu-item-first-title">
          <span class="flex">
            <a
              style="color:{{firstLink.setting_json.color}};font-style:{{firstLink.setting_json.style}};font-weight:{{firstLink.setting_json.bold}};text-decoration:{{firstLink.setting_json.decoration}};"
              target="{{firstLink.setting_json.open | default : '_self' }}"
              {% if firstLink.setting_json.model != 1 %}
              rel="external nofollow"
              {% endif %}
              href="{{firstLink.url_json.url | default:'javascript:void(0)' }}">
              {% if firstLink.src %}
                <header-nav-img>{% include 'lazy_img' , src: firstLink.src , alt: '' %}{{ firstLink.nav_item_name }}</header-nav-img>
              {% else %}
                {{ firstLink.nav_item_name }}
              {% endif %}
            </a>
          </span>
        </div>
        {% if secondLinks %}
          {% if tree_type == 'three' %}
            {% comment %}
              2级菜单
            {% endcomment %}
            <div class="{% if tree_type == 'three' %} header_menu-third {% else %} header_menu-second {% endif %} md:p-5 md:max-h-[70vh] box-border md:overflow-y-scroll header_submenu">
              <div class="header_submenu-content">
                <ul class="{{animation_class}} header_submenu-content-ul">
                  {% comment %}
                    菜单
                  {% endcomment %}
                  {% for secondLink in secondLinks %}
                    {% assign thirdLinks = secondLink.children %}
                    <li class="{% if thirdLinks %}header_menu-openable{% endif %} header_menu-item-second">
                      <div class="header_menu-item-second-title">
                        <a
                          style="color:{{secondLink.setting_json.color}};font-style:{{secondLink.setting_json.style}};font-weight:{{secondLink.setting_json.bold}};text-decoration:{{secondLink.setting_json.decoration}};"
                          target="{{secondLink.setting_json.open | default : '_self' }}"
                          {% if secondLink.setting_json.model != 1 %}
                          rel="external nofollow"
                          {% endif %}
                          href="{{secondLink.url_json.url | default:'javascript:void(0)' }}">
                          {% if secondLink.src %}
                            <header-nav-img>{% include 'lazy_img' , src: secondLink.src , alt: '' %}{{ secondLink.nav_item_name }}</header-nav-img>
                          {% else %}
                            {{ secondLink.nav_item_name }}
                          {% endif %}
                        </a>
                      </div>
                      {% if thirdLinks %}
                        <ul class="header_menu-item-third-wrapper">
                          {% for thirdLink in thirdLinks %}
                            <li class="header_menu-item-third md:mt-3">
                              <div>
                                <a
                                  style="color:{{thirdLink.setting_json.color}};font-style:{{thirdLink.setting_json.style}};font-weight:{{thirdLink.setting_json.bold}};text-decoration:{{thirdLink.setting_json.decoration}};"
                                  target="{{thirdLink.setting_json.open | default : '_self' }}"
                                  {% if thirdLink.setting_json.model != 1 %}
                                  rel="external nofollow"
                                  {% endif %}
                                  href="{{thirdLink.url_json.url | default:'javascript:void(0)' }}">
                                  {% if thirdLink.src %}
                                    <header-nav-img>{% include 'lazy_img' , src: thirdLink.src , alt: '' %}{{ thirdLink.nav_item_name }}</header-nav-img>
                                  {% else %}
                                    {{ thirdLink.nav_item_name }}
                                  {% endif %}
                                </a>
                              </div>
                            </li>
                          {% endfor %}
                        </ul>
                      {% endif %}
                    </li>
                  {% endfor %}
                </ul>
              </div>
            </div>
          {% else %}
            <div class="header_submenu -ml-[18px] md:p-5 md:min-w-[180px] md:max-w-[400px] md:max-h-[70vh] md:overflow-y-scroll box-border">
              <div class="header_submenu-content">
                <ul class="{{animation_class}} header_submenu-content-ul">
                  {% for secondLink in secondLinks %}
                    <li class="md:mt-3 header_menu-item-second">
                      <a
                        style="color:{{secondLink.setting_json.color}};font-style:{{secondLink.setting_json.style}};font-weight:{{secondLink.setting_json.bold}};text-decoration:{{secondLink.setting_json.decoration}};"
                        target="{{secondLink.setting_json.open | default : '_self' }}"
                        {% if secondLink.setting_json.model != 1 %}
                        rel="external nofollow"
                        {% endif %}
                        href="{{secondLink.url_json.url | default:'javascript:void(0)' }}">
                        {% if secondLink.src %}
                          <header-nav-img>{% include 'lazy_img' , src: secondLink.src , alt: '' %}{{ secondLink.nav_item_name }}</header-nav-img>
                        {% else %}
                          {{ secondLink.nav_item_name }}
                        {% endif %}
                      </a>
                    </li>
                  {% endfor %}
                </ul>
              </div>
            </div>
          {% endif %}
        {% endif %}
      </li>
    {% endfor %}
    <li
      id="oem-navigation-more-link"
      class="header_menu-item-first px-[18px] header_menu-openable"
      data-tree-type="three">
      <div class="header_menu-item-first-title">
        <span class="flex">
          <a href="javascript:;">{{ lang.general.more_link }}</a>
        </span>
      </div>
      <div class="header_menu-third md:p-5 md:max-h-[70vh] box-border md:overflow-y-scroll header_submenu">
        <div class="header_submenu-content flex">
          <ul class="more_links_header_menu-item-first w-[240px] flex-shrink-0"></ul>
          <div class="more_link_child"></div>
        </div>
      </div>
    </li>
  {% else %}
    <li class="header_menu-item-first px-[18px]" data-tree-type="one">
      <div class="header_menu-item-first-title">
        <span class="flex">
          <a href="/">Home</a>
        </span>
      </div>
    </li>
    <li class="header_menu-item-first px-[18px]" data-tree-type="one">
      <div class="header_menu-item-first-title">
        <span class="flex">
          <a href="/">Woman</a>
        </span>
      </div>
    </li>
    <li class="header_menu-item-first px-[18px]" data-tree-type="one">
      <div class="header_menu-item-first-title">
        <span class="flex">
          <a href="/">New</a>
        </span>
      </div>
    </li>
    <li class="header_menu-item-first px-[18px]" data-tree-type="one">
      <div class="header_menu-item-first-title">
        <span class="flex">
          <a href="/">Tops</a>
        </span>
      </div>
    </li>
    <li class="header_menu-item-first px-[18px]" data-tree-type="one">
      <div class="header_menu-item-first-title">
        <span class="flex">
          <a href="/">Dresses</a>
        </span>
      </div>
    </li>
    <li class="header_menu-item-first px-[18px]" data-tree-type="one">
      <div class="header_menu-item-first-title">
        <span class="flex">
          <a href="/">Sale</a>
        </span>
      </div>
    </li>
  {% endif %}
</ul>

{% if data.nav.id != '' %}
  <script>
    (function() {
      {%- comment -%}
        处理导航太多显示MoreLink
      {%- endcomment -%}

      function moreLinkHandle() {
        let nav_dom = $(`#oem-navigation`)
        let nav_width = nav_dom.parent().width()
        if(document.querySelector('#oem-navigation-more-link') == null) return;
        let nav_links_width = document.querySelector('#oem-navigation-more-link').clientWidth + 50;
        nav_dom.find(`.header_menu-item-first`).each((index, elem) => {
          nav_links_width += elem.clientWidth;
          (nav_width <= nav_links_width) && $(elem).hide() && $(elem).addClass('hiddenNav')
        })
    
        if (nav_width > nav_links_width) {
          $('#oem-navigation-more-link').hide()
        } else {
          $('#oem-navigation-more-link').show()
        }
      }


      {% comment %}
        获取MoreLink需要显示的导航
      {% endcomment %}

      function moreLinkRender() {
        let cloneNode = $('#oem-navigation>li').clone()
        $('#oem-navigation-more-link .more_links_header_menu-item-first').html(cloneNode)
        $('#oem-navigation-more-link .more_links_header_menu-item-first .header_menu-item-first').each((index, elem) => {
          if ($(elem).is(':visible')) {
            $(elem).remove();
          } else {
            $(elem).removeClass('hiddenNav').show()
          }
        });
        $('#oem-navigation-more-link .more_links_header_menu-item-first').children('.header_menu-item-first').hover(function() {
          $(this).addClass('on').siblings().removeClass('on')
          let cloneNode = $(this).find('.header_submenu-content-ul').clone()
          $('#oem-navigation-more-link .more_link_child').html(cloneNode)
        })
      }

      moreLinkHandle()
      moreLinkRender()


    })()
  </script>
{% endif %}